<template>
    <Modal v-model="showModal" width="360">
        <p slot="header"
           :style="{ color: danger?'#f60':'00FF79'}"
           style="text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>操作确认</span>
        </p>
        <div style="text-align:center">
            <p style="font-size: 16px">{{msg}}</p>
        </div>
        <div slot="footer">
            <Button :type="danger?'error':'success'" size="large" long @click="done">{{buttonName}}</Button>
        </div>
    </Modal>
</template>

<script>
    export default {
        name: "DangerOperationConfigDialog",
        data() {
            return {
                showModal: this.value
            }
        },
        watch: {
            showModal: function () {
                console.log(this.showModal);
                this.$emit('input', this.showModal);
                console.log("value:" + this.value);
            },
            value: function () {
                this.showModal = this.value;
            },
        },
        props: {
            // 是否是危险的操作提示
            danger: {
                type: Boolean,
                default: true
            },
            value: {
                type: Boolean,
                default: false
            },
            msg: {
                type: String,
                default: ''
            },
            buttonName: {
                type: String,
                default: '确认'
            },
        },
        methods: {
            // 点击了确认按钮
            done: function () {
                this.showModal = false;
                this.$emit('update:value', false);
                this.$emit('configDone');
            },
            show: function () {
                this.showModal = true;
            }
        }

    }
</script>

<style scoped>

</style>
